<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="del(1)">删除</button>
			<table border="" cellspacing="" cellpadding="">
				<tr><th><input type="checkbox" /></th><th>Header</th><th>Header</th></tr>
				<tr v-for="(item, index) of books" :key="item.id">
					<td><input type="checkbox" /></td>
					<td>{{item.id}}</td>
					<td>{{item.text}}</td>
				</tr>
			</table>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					books: [
						{id: 1, text: "haha"},
						{id: 2, text: "hehe"},
						{id: 3, text: "houhou"}
					]
				},
				methods: {
					del(index) {
						console.log(1)
						this.books.splice(index, 1);
					}
				}
			})
			
		</script>
	</body>
</html>
